<%@page import="java.sql.*"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1{
color: red;
text-align: center;
}
.kuang{
/*width: 700px;*/
margin: auto;
}
.content{
border: 2px solid red;
display: flex;
gap: 10px;
padding: 10px;
}
.column{
border: 1px solid gray;
padding: 10px;
white-space: nowrap;
flex-grow: 1;
}
</style>
<title>分页显示成语</title>
</head>
<body>
<h1>分页显示成语</h1>
<div class='kuang'> <%
Class.forName("com.mysql.cj.jdbc.Driver");
String stringPage=request.getParameter("page");
if(stringPage==null)stringPage="1";
int currentPage=Integer.parseInt(stringPage);
int n=20;
int columnCount=8;
int cyCountPerColumn=15;
int begin, over;
int maxPage;
int pageSize;
try(Connection cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/db?allowMultiQueries=true", "root", "12qwas");
		Statement st=cn.createStatement();
		ResultSet rs=st.executeQuery("select count(*) from chengyu");){
	rs.next();
	int total=rs.getInt(1);
	pageSize=columnCount*cyCountPerColumn;
	maxPage=total/pageSize+(total%pageSize==0?0:1);
	if(currentPage<1)currentPage=1;
	else if(currentPage>maxPage)currentPage=maxPage;
    begin=currentPage-n;
    over=currentPage+n;
    if(begin<1){
        over-=begin-1;
        if(over>maxPage)over=maxPage;
        begin=1;
    }else if(over>maxPage){
        begin-=over-maxPage;
        if(begin<1)begin=1;
        over=maxPage;
    }
}
%>
	<div class='nav'>
<%
if(begin>1){
	out.println("\t\t<a href='?page=1'>首页</a>");
}
	for(int i=begin;i<=over;i++){
	if(i==currentPage){
	out.println("\t\t<b>"+currentPage+"</b>");
	}else{
	    out.println("\t\t<a href='?page="+i+"'>"+i+"</a>");
	    }
} 
	if(over<maxPage){
		out.print("\t\t<a href='?page="+maxPage+"'>尾页</a>");
	}
%>
    </div>
	<div class='content'>
<%
try(Connection cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/db?allowMultiQueries=true", "root", "12qwas");
	PreparedStatement ps=cn.prepareStatement("select cy from chengyu limit ?,?")){
	ps.setInt(1, (currentPage-1)*pageSize);
	ps.setInt(2, pageSize);
	try(ResultSet rs=ps.executeQuery()){
		for(int i=0;i<columnCount;i++){
			out.println("\t\t<div class='column'>");
			for(int j=0;j<cyCountPerColumn;j++){
				if(rs.next()){
					out.println("\t\t\t<p>"+rs.getString(1)+"</p>");
				}else{
					out.println("\t\t\t<p>       <p>");
				}
			}
			out.println("\t\t</div>");
		}
	}
}
	%>
<!-- 	</div> -->
<!-- 	<div class='content'> -->
<!-- 		<div class='column'> -->
<!-- 			<p>一丁不识</p> -->
<!-- 			<p>一不做二不休</p> -->
<!-- 			<p>一不压众百不随一</p> -->
<!-- 			<p>一不扭众</p> -->
<!-- 			<p>一世之雄</p> -->
<!-- 			<p>一世龙门</p> -->
<!-- 			<p>一丘一壑</p> -->
<!-- 			<p>一丘之貉</p> -->
<!-- 			<p>一丝一毫</p> -->
<!-- 			<p>一丝不挂</p> -->
<!-- 		</div> -->
<!-- 		<div class='column'> -->
<!-- 			<p>一丝不紊</p> -->
<!-- 			<p>一丝不苟</p> -->
<!-- 			<p>一丝两气</p> -->
<!-- 			<p>一丝半粟</p> -->
<!-- 			<p>一个半个</p> -->
<!-- 			<p>一个巴掌拍不响</p> -->
<!-- 			<p>一个萝卜一个坑</p> -->
<!-- 			<p>一串骊珠</p> -->
<!-- 			<p>一举一动</p> -->
<!-- 			<p>一举万里</p> -->
<!-- 		</div> -->
<!-- 		<div class='column'> -->
<!-- 			<p>一举三反</p> -->
<!-- 			<p>一举两全</p> -->
<!-- 			<p>一举两得</p> -->
<!-- 			<p>一举千里</p> -->
<!-- 			<p>一举成名</p> -->
<!-- 			<p>一举手之劳</p> -->
<!-- 			<p>一之为甚</p> -->
<!-- 			<p>一之已甚</p> -->
<!-- 			<p>一之谓甚</p> -->
<!-- 			<p>一乱涂地</p> -->
<!-- 		</div> -->
<!-- 		<div class='column'> -->
<!-- 			<p>一了百了</p> -->
<!-- 			<p>一了百当</p> -->
<!-- 			<p>一事不知</p> -->
<!-- 			<p>一事无成</p> -->
<!-- 			<p>一五一十</p> -->
<!-- 			<p>一些半些</p> -->
<!-- 			<p>一人之下万人之上</p> -->
<!-- 			<p>一人之交</p> -->
<!-- 			<p>一人传虚万人传实</p> -->
<!-- 			<p>一人向隅满坐不乐</p> -->
<!-- 		</div> -->
<!-- 	</div> -->
<!-- </div> -->
</body>
</html>

